iT邦幫忙

2021 iThome 鐵人賽

DAY 1
1
自我挑戰組

Re: 從 Next.js 開始的 React 生活系列 第 1

[Day1] iThome 鐵人賽,I'm back!!!!!!!!!!

  • 分享至 

  • xImage
  •  

一樣是不免俗的前言

這次是第二次參加,
去年還懵懂無知(?)的情況下就被隊友推坑來參加鐵人賽,
去年我們是五人團,
可惜今年只剩我一人參加了XD
(PS1. 我並沒有跟去年的隊友告知說我今年有參加的這件事XD"
但也許過幾天他們就會發現了也說不定XD)
(PS2. 今年其實大家都比較忙,
但我不會說我是因為剛追完奧運就看到鐵人賽的文宣被吸引報名的XD
(為了不佔版面,我把文宣圖移到本文章最下方XD)
這也是我不敢跟團員說我有偷偷報名的原因XD)

今年的 30 天系列文準備要寫什麼呢?

去年的最後一篇文章有提到我那時候正好在接觸 Next.js,
是以 React 為基底的套件,
後續剛好有機會參與前端的撰寫(?)工作,
但是前期我實在吃足了苦頭,
去年的文章有提到我是寫純 HTML/CSS (跟 Javascript) 起家(?)的,
所以不要說 React,在那之前 Bootstrap 我也沒怎麼碰過,
Reactstrap 是把 Bootstrap 的語法用 React 的語法包裝起來。
但當下對我來說這些都算是剛接觸的新東西、新知識,
所以當時我幾乎是 Bootstrap, React, Reactstrap 傻傻分不清楚orz

我記得我一開始連 Bootstrap 的 mb-4, p-2 這種語法都看不懂,
更不要說 Bootstrap 很重要的 Grid 概念,
Container, Row, Col 根本不知道是什麼要怎麼用XD

(PS. 在 Bootstrap 的世界 Grid 是用 class 的方式寫成這樣:

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
  </div>
</div>

可參考→ 網格系統 (Grid system)
我相信以上的寫法是跟我當初一樣只寫過純 HTML/CSS 比較看得懂的樣子XD)

Reactstrap 把以上的語法包裝成這樣:

<Container>
  <Row>
    <Col>.col</Col>
  </Row>
</Container>

可參考→ Layout Components (Container, Row, Col)

但是光是這樣為什麼我會吃足苦頭,
因為帶我進門的前輩在我以上觀念都還沒建立起來時,
就直接叫我學這個寫法:

<Row>
    <Col xs="6" md="4">.col-6 .col-md-4</Col>
    <Col xs="6" md="4">.col-6 .col-md-4</Col>
    <Col md="4">.col-md-4</Col>
</Row>

md 是什麼啦XD 這是什麼根本看不懂XD
這就跟叫剛學日語的人,而且是剛學會五十音的情況下,
就叫他學動詞變化是一樣的心情XD

所以我想要透過這 30 天的文章把我去年剛接觸 Next.js, React, Bootstrap, Reactstrap 這段歷程記錄下來,
然後最後再把學習這些東西的順序釐清出來,
除了是複習之外,
也希望讓之後跟我遇到一樣問題的人不會跟我一樣霧煞煞XD
(feat. 以寫鐵人賽之名,行表前輩之實 XDDDDDDDDDD)

後記

其實會挑今天開賽是有特別的原因哦,
因為今天是我前公司離職滿三週年的日子!!!!!!!!
(feat. 跟現在夥伴們認識滿兩週年的日子XD)
(feat. 知世就是力量的知世生日XD)
https://ithelp.ithome.com.tw/upload/images/20210903/20129873x2AsxJTyEb.png

為了慶祝 9/3 這麼意義非凡的日子,
所以我決定今年挑 9/3 開賽XD
今年沒有參加團體組,
其實我超怕我中途棄賽XD
請參加鐵人賽的各位戰友們、夥伴們多多指教(及鞭策小的)XD

傳說中吸引我報名的文宣圖

https://ithelp.ithome.com.tw/upload/images/20210903/20129873RdBP9leUj9.png
去年完賽已經拿下第一面獎牌了,今年我要再拿下一面獎牌!!!!!!!!!!!!!!
Fighting!!!!!!!!!!!!!!!!!
https://ithelp.ithome.com.tw/upload/images/20210903/20129873ioxpXl0BrV.png

(PS. 抱歉小戴的貼圖借我用一下XD 但怕有打廣告嫌疑這邊就不放上貼圖連結,
有興趣的大家可以自行搜尋XD)


下一篇
[Day2] 論前端框架的好處及重要性~從自己刻到學習共通語言(上篇)
系列文
Re: 從 Next.js 開始的 React 生活31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言